<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>作业二</title>
    <style>
        /*控制浏览器的默认样式统一*/
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /*使其不是标准盒子，不会因
                                    为padding属性或者其他
                                    的吧盒子撑开*/
        }
        body>div { /*选择所有父级是 <body> 元素的 <div> 元素*/
            margin: 100px auto; /*内容居中*/
            width: 960px;
            border: 1px solid #DFDEDE;
            padding: 8px;
            font-size: 14px;
            color: #666666;
        }
        h3 {
            text-decoration: underline;
            margin-bottom: 8px;
            color: black;
            font-weight: normal;
            font-size: 16px;
        }
        hr {
            border: .5px solid #DFDEDE;
        }
        ul {
            float: right;
            width: 40%;
            list-style: none;
            padding: 2px 10px;
            line-height: 25px;
            color: blue;
            border: 1px solid #DFDEDE;
            margin: 10px 2px 0 10px;
        }
        ul li { /*后代选择器*/
            margin-left: 12px;
        }
        span { /*这是利用了border制作了类似三角形的图形*/
            width: 8px;
            height: 8px;
            float: left;
            position: relative;
            top: 7px;
            /*background-color: #B9B4B6;*/
            border: 4px solid;
            /* transparent 透明色*/
            border-color: transparent transparent transparent #B9B4B6;
        }
        table:first-child { /*	指定只有当<p>元素是其父级的第一个子级的样式。*/
            background: url("title_icon_bg.gif") no-repeat left center / 10.4px 16.9px;
            width: 100%;
        }
        table:first-child tr td:first-child {
            padding-left: 18px;
            width: 60%;
        }
        table:last-child {
            margin-top: 10px;
            width: 55%;
        }
        /*指定其是第几个孩子*/
        table:last-child tr td:nth-child(2) {
            padding: 8px 40px 8px 2px;
            text-align: left;
            vertical-align: top
        }
    </style>
</head>

<body>
    <div>
<!--        页面的header-->
        <table >
            <tr>
                <td>设计教程</td>
                <td>Photoshop</td>
                <td>平面设计</td>
                <td>印前技术</td>
                <td>网页设计</td>
                <td>多媒体</td>
            </tr>
        </table>
<!--        分割线-->
        <hr />
<!--        这个ul实现了页面右边的文字列表，
            里面用了float：right属性
            使其浮在table行的右边-->
        <ul>
            <span></span>
            <li>不要低估ps里的“自动颜色”命令</li>
            <span></span>
            <li>五步调整灰</li>
            <span></span>
            <li>Photoshop教程:使人物皮肤更加通透</li>
            <span></span>
            <li>Fireworks打造精美水晶盾形标志</li>
            <span></span>
            <li>快速消除环境色对画面的影响。</li>
            <span></span>
            <li>印前资料一扫描制作的六个方面</li>
            <span></span>
            <li>宝宝美白教程</li>
            <span></span>
            <li>宝宝美白教程</li>
            <span></span>
            <li>宝宝美白教程</li>
            <span></span>
            <li>宝宝美白教程</li>
            <span></span>
            <li>宝宝美白教程</li>
            <span></span>
            <li>宝宝美白教程</li>
            <span></span>
            <li>宝宝美白教程</li>
            <span></span>
            <li>宝宝美白教程</li>
            <span></span>
            <li>宝宝美白教程</li>
        </ul>
<!--        这个table两行三列，实现了页面的左边-->
        <table>
            <tr>
                <td>
                    <img src="./01.gif" width="165.1px" height="118.3px">
                </td>
                <td>
                    <h3>用Photoshop制作精美的光线条</h3>
                    <p>使用 Photoshop最基本的命令,通过简单 几步就可以实现精美的光线条。
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <img src="./02.gif" width="165.1px" height="118.3px">
                </td>
                <td>
                    <h3>对面的鸟儿看过来Ps趣味动画实例</h3>
                    <p>你妹你妹尼米诶你妹你妹尼米诶你妹你妹尼米诶你妹你妹尼米诶</p>

                </td>
            </tr>
            <tr>
                <td>
                    <img src="./03.gif" width="165.1px" height="118.3px">
                </td>
                <td>
                    <h3>用Photoshop制作精美的光线条</h3>
                    <p>你妹你妹尼米诶你妹你妹尼米诶你妹你妹尼米诶你妹你妹尼米诶</p>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>